第十八天--登入的檢查密碼功能

2023 iThome 鐵人賽

DAY 18

自我挑戰組

基礎前端+後端網站分享之留言板製作系列第 18 篇

15th鐵人賽

aliecele

2023-10-02 14:54:45

423 瀏覽

分享至

今天撰寫登入檢查密碼。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
    <title>登入留言板</title>
</head>

<body>
    <ul class="nav nav-tabs justify-content-center">
        <li class="nav-item">
            <a class="nav-link" aria-current="page" href="Home.php">留言板</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="login.php">登入</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="register.php">註冊</a>
        </li>
    </ul>

    <div class="mt-5">
        <h1 class="mt-5 text-center">登入</h1>

        <div class="form p-3">
            <form action="../php/verify_password.php" method="POST">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-light bg-dark">帳號: </span>
                    </div>
                    <input class="form-control" type="text" name="user_name" required="required" value="" placeholder="輸入帳號">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-light bg-dark">密碼: </span>
                    </div>
                    <input class="form-control" type="password" name="password" required="required" value="" placeholder="輸入密碼">
                </div>

                <input type="hidden" name="id" value="">
                <input type="submit" class="btn btn-dark" value="登入">


            </form>

        </div>


    </div>
</body>

</html>

一樣先在php檔案中新增php檔(verify_password.php)，作為檢查密碼的功能。

Form的action要連結到verify_password.php去，如果按照我的檔案位置放，會如程式碼的寫法。../php/verify_password.php意思是上個資料夾中的php資料夾中的verify_password.php。
一樣使用Post傳遞，Post才能保護用戶安全，Get會在網址上洩漏帳號密碼。

verify_password.php程式碼

<?php

include("datatable.php");

if (isset($_POST["user_name"])) {
    $user_name = $_POST["user_name"];
    $password = $_POST["password"];

    $account = check_password($user_name);
    if (isset($account[0]['user_name'])) {
        if (($account[0]['user_name'] == $user_name) && ($account[0]['password'] == $password)) {
            header('Location:/30days/message_board/screen/Home.php');
        } else {
            echo "<script>alert('密碼錯誤');</script>" . "<br>";
            echo "密碼錯誤" . "<br>";
        }
    } else {
        echo "<script>alert('此帳號沒有註冊');</script>" . "<br>";
        echo "此帳號沒有註冊" . "<br>";
        header('Location:/30days/message_board/screen/register.php');
        // header('Location:../screen/register.php');//相對寫法
    }
}

除了繼承了 include，讓 verify_password.php有能與資料庫連動的函式。

Isset()
當括弧放的變數是php認定的NULL時，會發出False訊號，反之除了NULL以外，會發出TRUE。
$account[0]['user_name']
這個變數明天會解釋，明天要介紹var_dump測試。
< script >
這是js語法，會在上面彈出視窗，如下圖所示。

不過會被header給強行忽略，只有在沒有適用header時會出現這畫面(我的verify_password.php程式碼是設定在當密碼失敗時)。

check_password來自datatable.php程式碼。
datatable.php程式碼

function check_password($user_name)
{
    $db = dbConnect();
    $account = $db->prepare("SELECT user_name,password FROM account WHERE user_name=?");
    $account->execute([$user_name]);
    return $account->fetchAll(PDO::FETCH_ASSOC);
}

SELECT user_name,password FROM account WHERE user_name=?
用來呈現account的user_name和password，條件式user_name是$user_name變數。
Prepare用來準備MYSQL語法。
execute([$user_name])
執行MYSQL語法，?(第一個，也是唯一一個)填入$user_name。
fetchAll(PDO::FETCH_ASSOC)
取得所有結果列，以陣列或物件方式回傳，也就是$account[0]['user_name']是其中一個回傳值。
至於如何運用回傳值和呈現回傳值，就是明天要介紹var_dump測試。

結論今天的兩個地方明天會在介紹var_dump測試時解答。

補充上次沒說的部份—header。
Header('檔案路徑') or Header(''檔案路徑'')
檔案路徑能用相對和絕對路徑。
相對:
header('Location:../screen/register.php');
絕對:
header('Location:/30days/message_board/screen/register.php');